import path from 'path'
import { defineConfig, loadEnv, UserConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' // svg 支持
import eslintPlugin from 'vite-plugin-eslint' // 导入vite对eslint的插件支持，类型参考：https://juejin.cn/post/7358352353295368232
// element-plus 按需导入插件
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ViteConfigDev from './build/vite.config.dev'
import ViteConfigProd from './build/vite.config.prod'

/** 根据是否为开发环境、生产打包环境，使用不同的vite配置 */
const EnvResolver: Record<'serve' | 'build', (env: ImportMetaEnv) => UserConfig> = {
    serve: (env: ImportMetaEnv) => ({ ...ViteConfigDev(env) }),
    build: (env: ImportMetaEnv) => {
        console.log('vite开始打包...')
        return { ...ViteConfigProd(env) }
    },
}

/**
 * vite配置项，具体配置请到build目录下进行详细配置
 */
export default defineConfig(({ command, mode }) => {
    console.log('command', command)
    // 获取到环境变量配置
    const env = loadEnv(mode, process.cwd()) as ImportMetaEnv
    const { server, base, build, resolve = {}, plugins = [] } = EnvResolver[command](env)
    // 统一返回配置
    return {
        /** 公共基础路径 */
        base,
        /** 开发阶段，vite动态打包服务器的配置 */
        server,
        /** 打包构建阶段的配置 */
        build,
        /** 样式处理配置 */
        css: {
            preprocessorOptions: {
                scss: {
                    javascriptEnabled: true,
                    additionalData: '@import "./src/styles/variables.scss";\n',
                },
            },
        },
        resolve: {
            // 配置路径别名
            alias: {
                '@': path.resolve(__dirname, './src'),
            },
            ...resolve,
        },
        plugins: [
            vue(),
            /** svg图标支持 */
            createSvgIconsPlugin({
                // 指定要缓存的图标文件夹
                iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
                // 指定符号ID格式
                symbolId: 'icon-[dir]-[name]',
            }),
            /** 增加eslint的vite插件，这样在程序运行时就能检查eslint规范 */
            eslintPlugin({
                // 需要被ESLint校验的文件
                // include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue'],
                // 配置忽略文件：忽略依赖文件、静态文件
                // exclude: ['node_modules/**', 'public/**', 'src/assets/**'],
            }),
            // element-plus 按需导入插件
            AutoImport({
                resolvers: [ElementPlusResolver()],
            }),
            Components({
                resolvers: [ElementPlusResolver()],
            }),
            ...plugins,
        ],
    }
})
